今天來弄一個自製的漂亮下拉式選單

首先下拉式選單，會有上面可以按的地方跟下方會彈出來的懸浮按鈕
我這邊直接設置了兩個圖樣，一個是向上一個向下，剛打開網站時應該是沒有顯示懸浮按鈕的，所以先把往上的隱藏，往下的顯示

<div class="input-group" id="input-group">
    <button type="button" class="btn dropdown-toggle" id="dropdown-toggle">
        請選擇　
        <i class="fas fa-chevron-down" style="display:block"></i>
        <i class="fas fa-chevron-up" style="display:none"></i>
    </button>
    <ul class="dropdown-menu" id="dropdown-menu">
        <li><a href="#">全部</a></li>
        <li><a href="#">台北</a></li>
        <li><a href="#">新北</a></li>
        <li><a href="#">台中</a></li>
    </ul>
</div>

button的部分是可以案的部分
ul是懸浮按鈕的部分

然後把CSS加上去，ul的部分因為要懸浮所以要做position: absolute; 並把高度拉到最高z-index: 100;
稍微做一下美化，自己喜歡的樣子
主要是ul的部分需要對一下位置，想要大概在哪個位置要排版一下~

完成後在ul設置display: none;
然後進入JS
這邊要用的是jQuery的. slideToggle()這個方法
設置當button點擊時，ul的dropdown-menu做拉開跟關上的動作
先設置一個在另外的函式中，因為其他地方還會呼叫到，直接拉出來比較方便

function change(n){
    $("#dropdown-menu").slideToggle("");
    if (n == 1) {
        slide = 0;
        $(".fa-chevron-up").attr("style", "display:none")
        $(".fa-chevron-down").attr("style", "display:block")
    }
    else {
        slide = 1;
        $(".fa-chevron-up").attr("style", "display:block")
        $(".fa-chevron-down").attr("style", "display:none")
    }
}

然後在到ready中寫當dropdown-toggle被點擊時，要發生的變化
因為要發生的變化我們已經寫好函式了，這邊直接呼叫並給予當前狀態
需要另外設置一個變數(需為全域變數，其他地方會用到)，用以幫助我們告訴change函式要打開還是關上

var slide = 0;
$(function () {
    $("#dropdown-toggle").click(function () {
        change(slide)
    });
})

利用. slideToggle()方法可以直接做到拉開與關上不用另外再設置東西了
這樣簡單漂亮的下拉式選單就完成囉!!

然後讓下拉式選單的按鈕有一點作用
首先像之前一樣多設一個div，並設置id，這次設在下面

<div class="input-group" id="input-group">
...
</div>
<div id="show"></div>

然後在JS寫函式
選擇後讓ul關上，一樣是透過改變slide數值跟呼叫change函式

function area(area) {
    $("#show").empty()
    slide = 0
    change(slide)
	$("#show").append(area.text)
}

跟之前選擇器一樣需要在HTML加上onclick="area(this)"
因為這次抓取的是a連結，然後文字是放在外面，所以直接抓取area.text便可以抓取到a連結的文字了~
然後便可以把抓到的文字或是另外設置的name、data-屬性等東西，運用到需要的地方了